<template>
  <el-container class="container">
    <div class="bar">
      <img class="logo" src="../../assets/images/ym/img_logo.png" />
      <div class="barRight">
        <img src="../../assets/images/ym/icon_phone.png" />
        <div>
          <p>全国加盟热线</p>
          <p>400-166-5776</p>
        </div>
      </div>
    </div>
    <div class="content">
      <img class="normalImg" src="../../assets/images/ym/img_banner1.png" />
      <div class="badge">
        <img src="../../assets/images/ym/img_less.png" />
        <img style="margin:0 150px" src="../../assets/images/ym/img_fast.png" />
        <img src="../../assets/images/ym/img_easy.png" />
      </div>
      <div class="area_one">
        <img class="titleImg" src="../../assets/images/ym/bg_brandstory1.png" />
        <div class="titleTxt">品牌故事</div>
        <img style="width: 100%;" src="../../assets/images/ym/img_brandstory.png" />
        <div class="img_bg">
          <div class="white_title">现代化生态牧场—打飞的来中国的澳牛</div>
          <div
            class="text"
          >2005年在泰顺县建成自有生态牧场，2011年我们从澳大利亚引进优质牧草和系谱纯正的荷斯坦、娟姗奶牛种群，建立了包括牧草种植、乳牛饲养等全方位的牧业管理体系，并率先实行“公司+农户”的方法，建立核心牧场、标准奶站等，促进了奶源质量的提高，并提高了奶农发展生产的积极性。</div>
        </div>
      </div>
      <div class="area_two">
        <div class="left_right">
          <img class="img_1" src="../../assets/images/ym/img_naiba.png" />
          <div class="text_2" style="margin-left: 65px;">
            <div class="t_2">全国首创奶吧</div>
            <div
              class="t_3"
            >在全国同行业中率先引领“学童奶计划”、“送奶到家”、“真鲜奶吧”等消费方式革命。2002年5月，我们在全国首创性地开设“一鸣真鲜奶吧”连锁业，至今达1500多家。</div>
          </div>
        </div>

        <div class="left_right">
          <div class="text_2" style="margin-right: 65px;">
            <div class="t_2">“机器换人”再升级</div>
            <div
              class="t_3"
            >2008年至今，投入总计3亿多元，拥有先进的生产工艺流水线和生产设备的一鸣现代化工业园，建成投产。2012年，“机器换人”的概念让产业再次升级。从瑞典、荷兰、台湾、美国等国家和地区引进了生产设备，作业方式从单机手工到连线式生产的转变，大大降低了人员配置，成功用机器代替了人力。</div>
          </div>
          <img class="img_1" src="../../assets/images/ym/img_machine.png" />
        </div>
      </div>
      <img
        class="normalImg"
        style="margin-bottom:40px;margin-top: 70px;"
        src="../../assets/images/ym/img_banner2.png"
      />
      <div class="itemContent">
        <div class="item">
          <img src="../../assets/images/ym/img_train.png" />
          <p>免费培训</p>
        </div>
        <div class="item">
          <img src="../../assets/images/ym/img_provide.png" />
          <p>奶源直供</p>
        </div>
      </div>
      <div class="itemContent">
        <div class="item">
          <img src="../../assets/images/ym/img_address.png" />
          <p>协助选址</p>
        </div>
        <div class="item">
          <img src="../../assets/images/ym/img_decorate.png" />
          <p>统一装修</p>
        </div>
      </div>
      <div class="itemContent">
        <div class="item">
          <img src="../../assets/images/ym/img_activity.png" />
          <p>活动策划</p>
        </div>
        <div class="item">
          <img src="../../assets/images/ym/img_update.png" />
          <p>实时更新</p>
        </div>
      </div>
      <img class="normalImg" style="width:1200px" src="../../assets/images/ym/img_banner3.png" />
      <div class="c_1">
        <img src="../../assets/images/ym/img_pure.png" />
        <img style="margin: 0 65px;" src="../../assets/images/ym/img_noadd.png" />
        <img src="../../assets/images/ym/img_kiss.png" />
      </div>
      <div class="c_2">
        <div class="c_2_content">
          <div class="c_2_row">
            <img src="../../assets/images/ym/img_cheap.png" />
            <div class="c_2_right">
              <div style="font-size: 100px;">
                <span style="color:#FFCC03">好喝</span>
                <span>不贵</span>
              </div>
              <div>自有生态牧场</div>
              <div class="last">澳大利亚纯正奶源</div>
            </div>
          </div>
          <div class="c_2_row">
            <div class="c_2_item">
              <img src="../../assets/images/ym/img_round1.png" />
              <p>地中海酸奶</p>
            </div>
            <div class="c_2_item">
              <img src="../../assets/images/ym/img_round2.png" />
              <p>家庭桶装系列</p>
            </div>
            <div class="c_2_item">
              <img src="../../assets/images/ym/img_round3.png" />
              <p>蛋奶系列</p>
            </div>
          </div>
          <div class="c_2_row">
            <div class="c_2_item">
              <img src="../../assets/images/ym/img_round4.png" />
              <p>鲜包系列</p>
            </div>
            <div class="c_2_item">
              <img src="../../assets/images/ym/img_round5.png" />
              <p>三明治系列</p>
            </div>
            <div class="c_2_item">
              <img src="../../assets/images/ym/img_round6.png" />
              <p>现烤烘焙系列</p>
            </div>
          </div>
        </div>
      </div>
      <img class="normalImg" src="../../assets/images/ym/img_banner4.png" />
      <div class="c_3">
        <img src="../../assets/images/ym/img_arrow.png" />
        <div>装修风格主打青春、时尚、文艺主题、用阳光、清爽、新鲜、充满活力的视觉性符号，直击年轻群体的内心，取得核心受众心理认同。</div>
      </div>
      <img class="normalImg" src="../../assets/images/ym/img_banner5.png" />
      <div class="c_4">
        <div class="c_4_title">
          <span>无忧</span>
          <span style="color:#FFCC03">经营</span>
        </div>
        <div class="c4_content">
          <div class="c4_row">
            <img src="../../assets/images/ym/img_hao.png" />
            <div class="c4_title2">公司饱配送</div>
            <div class="c4_content2">完善的原料供应链，总部统一配送原料，原料都是源自正规渠道的，质量有保障</div>
          </div>
          <div class="c4_row">
            <img src="../../assets/images/ym/img_kuai.png" />
            <div class="c4_title2">一对一指导</div>
            <div class="c4_content2">标准的操作流程，专人手把手教授技术，普通人通过简单学习也能轻松掌握技术。</div>
          </div>
          <div class="c4_row">
            <img src="../../assets/images/ym/img_bang.png" />
            <div class="c4_title2">线上线下卖</div>
            <div class="c4_content2">与多个团购，外卖网站建立深入的合作。实现线上线下双经营，大范围的招揽客源。</div>
          </div>
        </div>
      </div>
      <div class="c_5">
        <div class="c_5_title">
          <div>
            <span>八大</span>
            <span style="color:#FFCC03">扶持</span>
          </div>
          <div class="c_5_tile_right">
            <p>助你迈进</p>
            <p>创业之路</p>
          </div>
        </div>
        <div class="c_5_content">
          <div class="c5_row">
            <div class="c5_item">
              <div class="c5_title">项目运营支持</div>
              <div class="c5_content">提供技术教授，选址带店服务。</div>
            </div>
            <div class="c5_item">
              <div class="c5_title">创业顾问支持</div>
              <div class="c5_content">为创业者提供定制化创业咨询。</div>
            </div>
            <div class="c5_item">
              <div class="c5_title">售后支持</div>
              <div class="c5_content">提供开店后的经营指导，解决难题。</div>
            </div>
            <div class="c5_item">
              <div class="c5_title">营销策划支持</div>
              <div class="c5_content">制定活动营销方案，提高营业额</div>
            </div>
          </div>

          <div class="c5_row">
            <div class="c5_item">
              <div class="c5_title">产品研发支持</div>
              <div class="c5_content">进行产品研发和产品升级。</div>
            </div>
            <div class="c5_item">
              <div class="c5_title">市场运营支持</div>
              <div class="c5_content">进行品牌宣传，广告投放。</div>
            </div>
            <div class="c5_item">
              <div class="c5_title">物流运输支持</div>
              <div class="c5_content">采购、运输、及时高效。</div>
            </div>
            <div class="c5_item">
              <div class="c5_title">数据分析支持</div>
              <div class="c5_content">根据经营数据，提供建议指导。</div>
            </div>
          </div>
        </div>
      </div>
      <div style="font-size: 16px;padding: 35px;">技术支持：江门市蓬江区行通商贸有限公司 粤ICP备18134847号</div>
    </div>
    <div class="pc">
      <el-input class="submitInput" style="width:2rem" v-model="name" placeholder="请输入姓名"></el-input>
      <el-input
        class="submitInput"
        style="width:2rem;margin-left:20px"
        v-model="phone"
        placeholder="请输入手机号码"
      ></el-input>
      <div class="submitPc" @click="submit">获取加盟资料</div>
      <div class="tel">加盟热线：400-169-0574</div>
    </div>
  </el-container>
</template>

<script>
import store from "@/utils/factory";
export default {
  computed: {},
  name: "ym",
  data() {
    return {
      name: "",
      phone: "",
      device: "",
      joinButtonStatus: true,
      submitStatus: true
    };
  },
  created() {
    document.title = "一鸣鲜奶";
    window.scroll(0, 0);
  },
  mounted() {},
  methods: {
    phoneCall() {
      window.location.href = "tel:400-169-0574";
    },
    scrollTo() {
      window.scrollTo(0, document.body.clientHeight);
    },
    submit() {
      let self = this;
      if (!this.name) {
        this.$alert("请输入您的姓名", "提示", {
          confirmButtonText: "确定",
          callback: action => {}
        });
        return false;
      }
      if (!this.phone) {
        this.$alert("请输入您的手机号码", "提示", {
          confirmButtonText: "确定",
          callback: action => {}
        });
        return false;
      }
      this.axios
        .post("http://112.124.18.81/platform/message/report", {
          name: this.name,
          phone: this.phone,
          sourcePage: window.location.href,
          project: 116,
          content: "我要申请加盟"
        })
        .then(function(res) {
          self.$alert("提交成功", "提示", {
            confirmButtonText: "确定",
            type: "success",
            callback: action => {}
          });
        })
        .catch(function(err) {
          self.$alert("提交失败", "提示", {
            confirmButtonText: "确定",
            type: "error",
            callback: action => {}
          });
        });
    }
  }
};
</script>

<style rel="stylesheet/less" lang="less" scoped>
.nyImg {
  width: 100%;
}

.content {
  padding-bottom: 100px;
}

.container {
  display: flex;
  flex-direction: column;
}

.c_1 {
  margin-top: -150px;
  img {
    width: 230px;
  }
}

.c_2 {
  width: 1200px;
  margin: 0 auto;
  margin-bottom: 120px;
  display: flex;
  flex-direction: column;
  .c_2_row {
    margin-top: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 36px;
    font-weight: bold;
    p {
      background: #ffcc03;
      display: inline-block;
      padding: 10px 15px;
      border-radius: 15px;
      margin-top: 15px;
    }
    img {
      width: 350px;
      height: 350px;
    }
  }

  .c_2_item {
    flex: 1;
  }
}

.c_3 {
  width: 1200px;
  margin: 35px auto;
  font-size: 28px;
  img {
    width: 100%;
  }
  div {
    width: 800px;
    margin: 0 auto;
    text-align: left;
    margin-top: -58px;
    line-height: 60px;
    text-indent: 2em;
  }
}

.c_2_right {
  margin-left: 70px;
  font-size: 70px;
  .last {
    font-size: 50px;
    background: #ffcc03;
    padding: 10px 20px;
    margin-top: 20px;
  }
}

.c_4_title {
  margin: 60px 0;
  font-size: 100px;
  font-weight: bold;
}

.c4_content {
  display: flex;
  width: 1200px;
  margin: 0 auto;
  font-size: 24px;
  img {
    width: 300px;
  }

  .c4_content2 {
    width: 210px;
    margin-top: 15px;
    text-align: left;
    font-size: 19px;
    line-height: 28px;
  }

  .c4_row {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .c4_title2 {
    font-size: 42px;
    font-weight: bold;
    padding-bottom: 15px;
    padding-top: 20px;
    border-bottom: 3px solid #333;
  }
}

.c_5 {
  background: #fff2c1;
  width: 1200px;
  margin: 70px auto;
  margin-bottom: 0;
  font-size: 24px;
  padding: 24px;
  .c5_content {
    width: 170px;
    margin: 0 auto;
    font-size: 20px;
    /* font-weight: bold; */
    text-align: left;
    margin-top: 12px;
  }
}

.c5_row {
  display: flex;
  margin-bottom: 70px;
  .c5_item {
    flex: 1;
  }
  .c5_title {
    padding: 12px;
    display: inline-block;
    background: #ffcc03;
  }
}

.c_5_title {
  font-size: 70px;
  font-weight: bold;
  margin-bottom: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  .c_5_tile_right {
    margin-left: 30px;
    font-size: 26px;
    background: #ffcc03;
    padding: 10px 30px;
  }
}

.area_one {
  display: flex;
  flex-direction: column;
  width: 1200px;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  position: relative;
  margin-top: 150px;

  .titleImg {
    width: 30%;
    position: absolute;
    top: -80px;
    height: 160px;
  }

  .titleTxt {
    position: absolute;
    z-index: 99;
    top: 0;
    font-size: 40px;
  }
}

.area_two {
  display: flex;
  width: 1200px;
  margin: 0 auto;
  font-size: 26px;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  .left_right {
    display: flex;
    margin-top: 44px;
  }

  .img_1 {
    width: 460px;
  }

  .text_2 {
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .t_2 {
    font-weight: bold;
    font-size: 42px;
    margin-bottom: 25px;
  }

  .t_3 {
    line-height: 42px;
  }
}

.tel {
  margin-left: 23px;
  color: #fff;
  font-size: 24px;
  font-weight: bold;
}

.badge {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 80px;
  img {
    width: 160px;
  }
}

.itemContent {
  display: flex;
  width: 1200px;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
  .item {
    display: flex;
    flex-direction: column;
    position: relative;
    margin-bottom: 40px;
    img {
      width: 560px;
    }
    p {
      font-size: 50px;
      position: absolute;
      bottom: 24px;
      font-weight: bold;
    }
  }
}

.img_bg {
  width: 100%;
  height: 330px;
  background: url("../../assets/images/ym/bg_brandstory2.png") no-repeat center;
  background-size: 100%;
  font-size: 30px;
  padding: 40px 70px;
  line-height: 44px;
  text-align: left;

  .text {
    text-indent: 2em;
  }

  .white_title {
    background: #fff;
    display: inline-block;
    padding: 0 12px;
    border-radius: 4px;
    margin-bottom: 20px;
  }
}

.bar {
  display: flex;
  justify-content: space-around;
}

.normalImg {
  width: 100%;
  vertical-align: bottom;
}

.barRight {
  display: flex;
  font-size: 32px;
  font-weight: bold;
  align-items: center;
  img {
    width: 42px;
    height: 47px;
    margin-right: 10px;
  }
}

.pcBox {
  font-size: 0.32rem;
}

.pcLabel {
  width: 2rem !important;
}

.submitInput {
  &:focus {
    background: #ffcc03 !important;
  }
}

.submit {
  background: #fff;
  border-radius: 0.08rem;
  border: none;
  border-radius: 0.8rem;
  font-size: 0.24rem;
  font-weight: bold;
  width: 2.2rem;
  text-align: center;
  height: 0.7rem;
  line-height: 0.7rem;
}

.submitPc {
  margin-left: 20px;
  color: #fff;
  border-radius: 0.08rem;
  border: none;
  font-size: 0.24rem;
  font-weight: bold;
  text-align: center;
  padding: 0.15rem 0.2rem;
  background: #ff0000;
  cursor: pointer;
  &:hover {
    color: #fff;
    background: #f56c6c;
  }
}

.joinButton {
  margin-top: 0.2rem;
  font-size: 0.28rem;
  background: #f56c6c;
  color: #fff;
  padding: 0.14rem;
  border-radius: 0.08rem;
}

.pc {
  display: flex;
  position: fixed;
  bottom: 0;
  padding: 0.2rem 0;
  align-items: center;
  justify-content: center;
  background: #ffcc03;
  width: 100%;
  z-index: 999;
}

.item {
  display: flex;
  align-items: center;
  flex: 1;
}

.inputArea {
  position: absolute;
  display: flex;
  flex-direction: column;
  margin-top: 2rem;
  left: 0.8rem;
  right: 0.8rem;
  align-items: center;
  justify-content: center;
}

.msgBox {
  position: relative;
  margin-bottom: 1rem;
}

.imgBox {
  width: 100%;
  margin-bottom: 77px;
  position: relative;
}

.tips {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 35px;
  font-size: 12px;
}

.logo {
  width: 189px;
  height: 97px;
}
</style>